import React, { useEffect, useState } from 'react'
import { NavBar, Space, Toast, Form, Input, Button, Tabs } from 'antd-mobile'
import axios from '../../axios/api';
import { useNavigate } from 'react-router-dom';

function Home() {

    const nav = useNavigate()
    const [data1, setData] = useState([])
    const [image, setimage] = useState('')
    const [title, settitle] = useState('')
    const back = () =>
        Toast.show({
            content: '点击了返回区域',
            duration: 1000,
        })
    const onFinish = (values) => {
        console.log(values);

    }



    const datalist = async () => {
        const res = await axios.get('/api/list', {
            params: {
                title: title
            }
        })
        console.log(res.data);

        setData(res.data)
    }
    useEffect(() => {
        datalist()
    }, [])

    const detail = () => {
        nav('/detail')

    }

    const tosearch = () => {
        nav('/search')
    }


    return (
        <div>
            <NavBar style={{ position: 'fixed', top: 0 }} onBack={back}>一机旅游</NavBar>
            <div>
                <Form
                    name='form'
                    onFinish={onFinish}


                >
                    <Form.Item
                        rules={[{ required: true, message: '姓名不能为空' }]}
                    >
                        <Input onClick={tosearch} onChange={console.log} placeholder='请输入姓名' />
                    </Form.Item>

                </Form>
            </div>

            <Tabs>
                <Tabs.Tab title='水果' key='fruits'>
                    <div style={{ display: 'flex' }} onClick={detail}>
                        <dl >
                            <dt>
                                <img style={{ width: '20vw' }} src="https://robohash.org/230000200003050046?set=set3" alt="" />
                            </dt>
                            <dd>
                                <p>当地网红打卡地</p>
                            </dd>
                        </dl>
                        <dl >
                            <dt>
                                <img style={{ width: '20vw' }} src="https://robohash.org/150000201011033240?set=set2" alt="" />
                            </dt>
                            <dd>
                                <p>当地网红打卡地</p>
                            </dd>
                        </dl>
                    </div>
                    <div style={{ display: 'flex' }}>
                        <dl >
                            <dt>
                                <img style={{ width: '20vw' }} src="https://robohash.org/230000200003050046?set=set3" alt="" />
                            </dt>
                            <dd>
                                <p>当地网红打卡地</p>
                            </dd>
                        </dl>
                        <dl >
                            <dt>
                                <img style={{ width: '20vw' }} src="https://robohash.org/150000201011033240?set=set2" alt="" />
                            </dt>
                            <dd>
                                <p>当地网红打卡地</p>
                            </dd>
                        </dl>
                    </div>
                    <div style={{ display: 'flex' }}>
                        <dl >
                            <dt>
                                <img style={{ width: '20vw' }} src="https://robohash.org/230000200003050046?set=set3" alt="" />
                            </dt>
                            <dd>
                                <p>当地网红打卡地</p>
                            </dd>
                        </dl>
                        <dl >
                            <dt>
                                <img style={{ width: '20vw' }} src="https://robohash.org/150000201011033240?set=set2" alt="" />
                            </dt>
                            <dd>
                                <p>当地网红打卡地</p>
                            </dd>
                        </dl>
                    </div>

                </Tabs.Tab>
                <Tabs.Tab title='蔬菜' key='vegetables'>
                    西红柿
                </Tabs.Tab>
                <Tabs.Tab title='动物' key='animals'>
                    蚂蚁
                </Tabs.Tab>
            </Tabs>


        </div>
    )
}

export default Home